<template>
  <div>
    <el-header>俄罗斯动力质量管理平台</el-header>
    <!--整体外框架-->
    <div class="mainDiv">
      <!--体系管理框架-->
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle" >体系管理系统</span>
          <hr>
        </div>
        <!--包住下面的每一个小板块（体系管理框架）-->
        <div class="card-container">
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(8)">体系文件</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(18)">体系管理系统</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(1)">问题管理</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(16)">可疑品业务</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(21)">报警解除业务</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(9)">良品条件业务</span>
          </el-card>
        </div>
      </div>
      <hr>
      <!--标准作业管理系统框架-->
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle" >标准作业管理系统</span>
          <hr>
          <div class="card-container">
            <el-card  class="cadMain" shadow="hover" >
              <span class="textBottom" @click="control(4)">工序指导书管理</span>
            </el-card>
            <el-card  class="cadMain" shadow="hover" >
              <span class="textBottom" @click="control(5)">零部件指导书管理</span>
            </el-card>
            <el-card  class="cadMain" shadow="hover">
              <span class="textBottom" @click="control(11)">低频作业指导书(新)</span>
            </el-card>
            <el-card  class="cadMain" shadow="hover">
              <span class="textBottom" @click="control(17)">标准作业引导系统</span>
            </el-card>
          </div>
        </div>
      </div>
      <hr>
      <!--过程能力管理框架-->
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle" >过程能力管理系统</span>
          <hr>
        </div>
        <!--包住下面的每一个小板块（过程能力管理系统）-->
        <el-card  class="cadMain" shadow="hover" >
          <span class="textBottom" @click="control(3)">防错管理</span>
        </el-card>
        <el-card  class="cadMain" shadow="hover" >
          <span class="textBottom" @click="control(14)">工装管理</span>
        </el-card>
      </div>
      <hr>
      <!--外购件管理框架-->
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle" >外购件管理系统</span>
          <hr>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(13)">入厂检验管理</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(22)">叫料系统</span>
          </el-card>
        </div>
      </div>
      <hr>
      <!--可靠高效的工艺-->
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle" >可靠高效的工艺管理系统</span>
          <hr>
        </div>
        <!--包住下面的每一个小板块（可靠高效的工艺管理系统）-->
        <div class="card-container">
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="controlPlan">控制计划管理</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(17)">工序防错分析</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(7)">清洁度管理</span>
          </el-card>
        </div>
      </div>
      <hr>
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle"><strong>可靠、准确的探测能力管理系统</strong></span>
          <hr>
        </div>
        <!--包住下面的每一个小板块（可靠高效的工艺系统）-->
        <div class="card-container">
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="controlTesting">频次检测/趋势预判</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(19)">过程能力监视系统</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(12)">扭矩管理</span>
          </el-card>
        </div>
      </div>
      <hr>
      <!--第六个管理项目（严谨的产品、过程设计）-->
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle"><strong>严谨的产品、过程设计</strong></span>
          <hr>
        </div>
        <!--包住下面的每一个小板块（严谨的产品、过程设计）-->
        <div class="card-container">
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(2)">装配设备维保</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(15)">装配设备管理</span>
          </el-card>
        </div>

      </div>

      <hr>
      <!--第七个管理项目（严谨的产品、过程设计）-->
      <div>
        <div style="margin-top: 10px">
          <span class="mainTitle"><strong>基础信息维护</strong></span>
          <hr>
        </div>
        <!--包住下面的每一个小板块（严谨的产品、过程设计）-->
        <div class="card-container">
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(10)">岗位职责管理</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(6)">基本信息维护</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(20)">成熟度提升</span>
          </el-card>
          <el-card  class="cadMain" shadow="hover" >
            <span class="textBottom" @click="control(20)">成熟度提升</span>
          </el-card>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{

    }
  },
  methods:{
    repairBook(){
       this.$router.push("/RepairBook")
    },
    controlPlan(){
      this.$router.push("/controlPlan")
    },
    controlTesting(){
      this.$router.push("/controlTesting")
    },
    control(doe){
      if (doe===1){
        this.$router.push("/problemManagementNew")
      }
      else if (doe===2){
        this.$router.push("/equipmentMaintain")
      }
      else if (doe===3){
        this.$router.push("/errorProofing")
      }
      else if (doe===4){
        this.$router.push("/operateGuideBook")
      }
      else if (doe===5){
        this.$router.push("/componentGuideBook")
      }
      else if (doe===6){
        this.$router.push("/baseInformation")
      }
      else if (doe===7){
        this.$router.push("/cleanliness")
      }
      else if (doe===8){
        this.$router.push("/systemDocument")
      }
      else if (doe===9){
        this.$router.push("/goodProductConditions")
      }
      //岗位职责管理
      else if (doe===10){
        this.$router.push("/jobDescription")
      }
      //低频作业指导书（新）
      else if (doe===11){
        this.$router.push("/changeModelNew")
      }
      //扭矩管理
      else if (doe===12){
        this.$router.push("/torqueManage")
      }
      //入厂检验板块
      else if (doe===13){
        this.$router.push("/stockTest")
      }
      //工装管理
      else if (doe===14){
        this.$router.push("/equipmentManagement")
      }
      //
      //工装管理
      else if (doe===15){
        this.$router.push("/assemblyEquipment")
      }
      //可疑品业务
      else if (doe===16){
        this.$router.push("/suspectProduct")
      }
      //标准作业引导系统
      else if (doe===17){
        this.$router.push("/workGuide")
      }
      else if (doe===18){
        this.$router.push("/toExamineProblem")
      }
      else if (doe===19){
        this.$router.push("/macTestCon")
      }
      //成熟度提升
      else if (doe===20){
        this.$router.push("/maturityManage")
      }
      //体系业务化-报警解除
      else if (doe===21){
        this.$router.push("/workExceptionRemoval")
      }
      //叫料系统
      else if (doe===22){
        this.$router.push("/dateBack")
      }
      //临时工作

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.mainDiv{
  border-width: 1px;
  border-style: solid;
  border-color: #c2c2c2;
  width: 90%;
  margin-left: 5%;
}
.el-header{
  color: #ffffff;
  font-size: 35px;
  text-align: center;
  height: 10vh;
  line-height:8vh;
  background-image: url('@/assets/hande.png');
  background-size: 100%;
  /*文字居中*/
  display: flex;
  justify-content: center;/*水平居中*/
  align-items: center;/*垂直居中*/
}
.card-container {
  //display: flex;
  width: 100%; /* 容器宽度 */
  white-space: nowrap; /* 防止内容换行 */
  overflow-x: auto; /* 启用水平滚动条（如果内容超出容器宽度） */
  justify-content: flex-start; /* 水平方向上靠左排列 */
}
.cadMain{
  display:inline-block; /* 使其在同一行显示 */
  margin-top: 5px;
  margin-left: 25px;
  margin-bottom: 15px;
  height: 200px;
  width: 150px;
  background-image: url('@/assets/repairMain.png');
  background-size: 100%;
  position: relative;
  white-space: normal;
}
.mainTitle{
  font-size: 20px;
  color: red;
  font-weight: bold;
}
.textBottom{
  position: absolute;
  bottom: 10px; /* 距离底部的距离 */
  right: 10px; /* 距离右边的距离 */
  font-weight: bold;
  cursor: pointer;
}

.camera-view {
  text-align: center;
  margin-top: 50px;
}
button {
  margin: 10px;
}


</style>
